<template>
  <view>
    <!--
       segNerveInteractBox：
        本组建的目标：
          - 实现一个ImgBox
          - 实现任意的多边形组建
          - 动态计算并将多边形组建放到ImgBox的相对位置
        尝试的技术如下：
          - D3.js: 将目标转换为矢量图进行交互
          - fabric.js: 将目标转换为caves基础图案
          - 前端游戏框架： https://blog.csdn.net/valada/article/details/81639708
            - Phaser.js: 有点和vue不太兼容
          - opencv.js: 将后台代码迁移到前端，自行编写坐标转换代码等
          - konva.js
    -->

    <!--
      实现方案： fabric.js
      失败： 无法兼容uni-app
      https://ask.dcloud.net.cn/question/86698
    -->

    <!--
       实现方案： Phaser.js
       失败: 原因同上
    -->

    <!--
      实现方案: konva.js
      https://github.com/konvajs/vue-konva
      https://konvajs.org/docs/vue/Custom_Shape.html

      通过舞台： stage,
      层： layer,
      组： group,
      图案: rect/circle/ellipse/line/image/text/v-text-path/star/label/path/regular-polygon
      这四种组织结构完成绘画
      https://konvajs.org/docs/vue/Shapes.html

      目标封装的事件如下：
      click, dblclick, mouseover, tap, dbltap, touchstart etc
      attributes change events (scaleXChange, fillChange)
      drag&drop events (dragstart, dragmove, dragend).
      https://konvajs.org/docs/vue/Events.html

      导入在线图片：
      https://konvajs.org/docs/vue/Images.html


      方案就是声明两块正方格区域
        - 非手机端的时候，宽为416 * 2, 否则高为 416 * 2
        - 第一块区域用于交互，第二块区域用于展示交互数据
          - 这样子处理一方面避免交互区域和显示数据的区域重叠
          - 另一方面通常交互区域比较小，看不清重叠的数据
    -->

<!--      <konva-layer>-->
<!--        <konva-circle :config="configCircle"></konva-circle>-->
<!--      </konva-layer>-->
<!--      <konva-layer>-->
<!--        <konva-regular-polygon :config="configPolygon"></konva-regular-polygon>-->
<!--        <konva-line :config="{-->
<!--          x: 20,-->
<!--          y: 200,-->
<!--          points: [20, 20, 100, 0, 100, 120],-->
<!--          tension: 0.5,-->
<!--          closed: true,-->
<!--          stroke: 'black',-->
<!--          fillLinearGradientStartPoint: { x: -50, y: -50 },-->
<!--          fillLinearGradientEndPoint: { x: 50, y: 50 },-->
<!--          fillLinearGradientColorStops: [0, 'red', 1, 'yellow'] }"-->
<!--        />-->

<!--        <konva-shape :config="{-->
<!--        sceneFunc: function(context, shape) {-->
<!--          context.beginPath();-->
<!--          context.moveTo(20, 50);-->
<!--          context.lineTo(220, 80);-->
<!--          context.quadraticCurveTo(150, 100, 260, 170);-->
<!--          context.closePath();-->

<!--          // special Konva.js method-->
<!--          context.fillStrokeShape(shape);-->
<!--        },-->
<!--        fill: '#00D2FF',-->
<!--        stroke: 'black',-->
<!--        strokeWidth: 4-->
<!--      }"/>-->
<!--      </konva-layer>-->

    <!--
     // configCircle: {
      //   x: 100,
      //   y: 100,
      //   radius: 70,
      //   fill: 'red',
      //   stroke: 'black',
      //   strokeWidth: 4
      // },
      // configPolygon: {
      //   x: 200,
      //   y: 200,
      //   sides: 5,
      //   radius: 70,
      //   fill: 'red',
      //   stroke: 'black',
      //   strokeWidth: 4,
      //   shadowOffsetX : 20,
      //   shadowOffsetY : 25,
      //   shadowBlur : 40,
      //   opacity : 0.5
      // },
     -->

    <!--
        现在的绘图有以下问题：
          TODO 如果绘制的目标不是全封闭的，容易覆盖整个图像，所以暂时舍弃fill属性
               此问题需要添加后续封闭图像的算法，
          TODO 图像刷新机制不明，可能是绘制内容异常导致的填充问题，或者数据传入后没有刷新的问题
               此问题可以暂时使用v-if的强制刷新处理
          TODO 由于有些节点过于细小，无法绘制，需要自行增加坐标缩放并记录
          TODO 缩放完成后需要实现一个类似窗口滑动形式的组建，来实现整张图的查看
               这两个操作如果找到大图浏览的组建，即可实现
          暂时打算手动实现这个缩放功能
      -->

<!--    测试成功，绘制问题已写成TODO，开始实现自定义viewer-->
<!--    <view ref="viewWrapper">-->
<!--      <view v-if="normalList.length !== 0">-->
<!--        <konva-stage :config="configKonva">-->
<!--          <konva-layer ref="picLayer">-->
<!--            <konva-image :config="{-->
<!--              image: normalImg,-->
<!--              x: 0,-->
<!--              y: 0-->
<!--            }"></konva-image>-->
<!--          </konva-layer>-->
<!--          <konva-layer ref="lineLayer" >-->
<!--            <konva-line v-for="(item, index) in normalList" :key="index" :config="item" @click="clickEvent" @touchstart="clickEvent"/>-->
<!--          </konva-layer>-->
<!--          <konva-layer ref="textLayer">-->
<!--            <konva-text v-for="(item, index) in normalTextList" :key="index" :config="item"></konva-text>-->
<!--          </konva-layer>-->
<!--        </konva-stage>-->
<!--      </view>-->
<!--      <view v-else>-->
<!--        <u&#45;&#45;text text="量化交互(原图)" align="left"></u&#45;&#45;text>-->
<!--      </view>-->
<!--    </view>-->

<!--    <view ref="enhance">-->
<!--      <view v-if="enhanceList.length !== 0">-->
<!--        <konva-stage :config="configKonva">-->
<!--          <konva-layer ref="lineLayer" >-->
<!--            <konva-line v-for="(item, index) in enhanceList" :key="index" :config=item />-->
<!--          </konva-layer>-->
<!--        </konva-stage>-->
<!--      </view>-->
<!--      <view v-else>-->
<!--        <u&#45;&#45;text text="量化交互(增强图)" align="left"></u&#45;&#45;text>-->
<!--      </view>-->
<!--    </view>-->

    <view ref="viewWrapper">
      <view ref="drawWrapper">
        <konva-stage
            :config="configKonva"
            style="margin: 0 auto"
            ref="interactStage"
            @click="clickDraw"
            @touchstart="clickDraw"
        >
          <konva-layer ref="imgLayer">
            <konva-image :config="{
              image: oriImgObj,
              x: 0,
              y: 0
            }"></konva-image>
          </konva-layer>
          <konva-layer ref="pointLayer">
            <konva-line
              v-for="(item, index) in drawNerveArray"
              :key="index"
              :config="item"
              @click="clickEvent"
              @touchstart="clickEvent"
            ></konva-line>
          </konva-layer>
          <konva-layer ref="introduceLayer">
            <konva-line :config="iLineVertical"></konva-line>
            <konva-line :config="iLineHorizontal"></konva-line>
          </konva-layer>

<!--          <konva-layer ref="dragLayer">-->
<!--            &lt;!&ndash;-->
<!--              纵向需要touch辅助触发drag事件，否则容易失效-->
<!--             &ndash;&gt;-->
<!--            <konva-rect-->
<!--                v-if="needScroll.y === true"-->
<!--                ref="verticalBar"-->
<!--                @touchstart="verticalTouchStart"-->
<!--                @touchmove="verticalTouchMove"-->
<!--                @dragmove="verticalBarDrag"-->
<!--                :config="{-->
<!--                width: 15,-->
<!--                height: 100,-->
<!--                fill: 'grey',-->
<!--                opacity: 0.8,-->
<!--                x: configKonva.width - differValue.y,-->
<!--                y: 5,-->
<!--                draggable: true,-->
<!--                dragBoundFunc: function (pos){-->
<!--                  pos.x = configKonva.width - differValue.y-->
<!--                  pos.y = Math.max(-->
<!--                      Math.min(pos.y, configKonva.height - 100 - 5),  // 15看看是否滑条超过图像-->
<!--                      5-->
<!--                  )-->
<!--                  return pos-->
<!--                }-->
<!--            }"></konva-rect>-->
<!--            &lt;!&ndash;-->
<!--                横向在启动滑块的时候异常，需要添加touch事件出发drag事件-->
<!--                在滑块禁止后，暂时没有异常-->
<!--                @touchstart="horizontalTouchStart"-->
<!--                @touchmove="horizontalTouchMove"-->
<!--             &ndash;&gt;-->
<!--            <konva-rect-->
<!--                v-if="needScroll.x === true"-->
<!--                ref="horizontalBar"-->
<!--                @dragmove="horizontalBarDrag"-->
<!--                :config="{-->
<!--                width: 100,-->
<!--                height: 20,-->
<!--                fill: 'grey',-->
<!--                opacity: 0.8,-->
<!--                x: 0,-->
<!--                y: configKonva.height - differValue.x,-->
<!--                draggable: true,-->
<!--                dragBoundFunc: function (pos){-->
<!--                  pos.x = Math.max(-->
<!--                      Math.min(pos.x, configKonva.width - 100),-->
<!--                      5-->
<!--                  )-->
<!--                  pos.y = configKonva.height - differValue.x-->
<!--                  return pos-->
<!--                }-->
<!--            }"></konva-rect>-->
<!--          </konva-layer>-->
        </konva-stage>
      </view>
      <view ref="textContent" :style="getTableStyle()">
        <uni-table border stripe empty-text="">
          <uni-tr>
            <uni-th align="center" v-for="(item, idx) in tableTitle" :key="idx">{{ item.text }}</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, idx) in textInfoArray" :key="idx">
            <uni-td align="center">{{ item.text }}</uni-td>
            <uni-td align="center">{{ item.value }}</uni-td>
          </uni-tr>
        </uni-table>
<!--        <u&#45;&#45;text-->
<!--            align="center"-->
<!--            v-for="(item, idx) in textInfoArray"-->
<!--            :key="idx"-->
<!--            :text="item.text + item.value"></u&#45;&#45;text>-->

<!--        <u&#45;&#45;text align="center" :text="debugInfo"></u&#45;&#45;text>-->
      </view>
    </view>
  </view>
</template>

<script>

import {mapState} from "vuex";
import statusJudge from "../../utils/monitor/statusJudge";
import appConfig from "../../api/appConfig";
import flaskApi from "../../api/flaskApi";
import language from "../../api/language";
import UniTable from "../uni-table/uni-table";

export default {
  name: "segNerveInteractBox",
  components: {UniTable},
  mixins: [statusJudge],
  computed: {
    ...mapState('app', ['winSize', 'nowLanguage'])
  },
  watch: {
    winSize(newVal, oldVal){
      this.scaleReCal()
    },
    nowLanguage(newVal, oldVal){
      this.changeComponentLanguage()
    },
    oriImgUrl(newVal, oldVal){
      const image = new window.Image()
      image.src = this.oriImgUrl
      image.onload = () => {
        this.oriImgObj = image
        this.scaleReCal()
      }
    }
  },
  props: {
    // 由于都需要进行数据修改，所以这些数据只能只读，
    // 并将计算结果写入某个属性后才能使用
    // 图像的url
    oriImgUrl: {
      type: String,
      default(){
        return ""
      }
    },
    // 需要渲染的点
    oriNervePoints: {
      type: Array,
      default() {
        return []
      }
    },
    // 需要展示的数据
    oriNerveValue: {
      type: Array,
      default(){
        return []
      }
    }
  },
  data(){
    return {
      // 代表图片和节点的缩放比例
      // 在显示区域较大的时候使用
      stageScale: {
        xScale: 1,
        yScale: 1
      },

      // 记录原始的舞台大小
      // 也就是原始图片的大小, 后续出现图像尺寸不同时由服务器传回来
      oriStage: {
        width: 416,
        height: 416
      },

      // 用于渲染canvas的大小
      configKonva: {
        width: -1,
        height: -1,
        draggable: true
      },

      // 结果计算结果，判断是否增加滚动条
      needScroll: {
        x: false,
        y: false
      },

      // 原始的图片对象
      oriImgObj: null,
      // 用于渲染的图像对象, 好像不需要
      // drawImgObj: null,

      // 用于渲染的图像点
      valueList: [],  // 临时调试用
      normalList: [],  // 临时调试用
      drawNerveArray: [],

      // 记录id, 用于清空状态
      lastObjId: "-1",

      // 文本信息
      tableTitle: [
        { text: "属性" },
        { text: "数值" }
      ],
      textInfoArray: [
        { text: "神经长度", value: 0 },
        { text: "神经角度", value: 0 }
      ],

      // 用于计算拖动信息
      nowStartPoint: {
        x: -1,
        y: -1
      },

      // 用于调试
      debugInfo: "",

      // 常量偏移
      differValue: {
        y: 20,
        x: 25
      },

      // 重载draggle事件，使用touch代替
      verticalStart: {
        x: -1,
        y: -1
      },
      horizontalStart: {
        x: -1,
        y: -1
      },

      // 点击指示线
      iLineVertical: {
        points: [],
        stroke: 'blue',
        strokeWidth: 1,
        closed: false
      },
      iLineHorizontal: {
        points: [],
        stroke: 'blue',
        strokeWidth: 1,
        closed: false
      }
    }
  },
  mounted() {
    // 第一步应该判断是否有数据传入
    // 调试阶段直接写
    // 这里的渲染点，以及原始图像的url由使用组建的界面传入
    // this.test_get_remote_value()
    // 计算缩放
    // setTimeout(()=>{
    //   this.scaleReCal()
    // }, 1000)

    if (this.oriImgUrl !== ""){
      const image = new window.Image()
      image.src = this.oriImgUrl
      image.onload = () => {
        this.oriImgObj = image
        this.scaleReCal()
      }
    }
  },
  methods: {
    getTableStyle(){
      if(this.judge(appConfig.calMode.mobileNoLeft)){
        return { 'width': '100%', 'margin': '5px auto'}
      }else{
        return { 'width': '70%', 'margin': '0 auto'}
      }
    },
    horizontalTouchStart(e){
      this.horizontalStart = {
        x: this.$refs.horizontalBar.getNode().x(),
        y: this.configKonva.height - this.differValue.x
      }
    },
    horizontalTouchMove(e){
      // debugger
      let touch = e.currentTarget.parent.parent.pointerPos
      let nowPos = {
        x: touch.x,
        y: touch.y
      }
      let dx = nowPos.x - this.horizontalStart.x
      let xBarPos = this.$refs.horizontalBar.getNode().x() + dx - 32 - 15
      xBarPos = Math.max(Math.min(xBarPos, this.configKonva.width - 100 - 5), 5)

      let barHorizontalRange = this.configKonva.width - 100 - 5
      let percent = (xBarPos - 5) / barHorizontalRange
      if (percent < 0){
        percent = 0
      }else if(percent > 1){
        percent = 1
      }
      this.$refs.horizontalBar.getNode().position({x: xBarPos, y: this.horizontalStart.y})
      this.$refs.imgLayer.getNode().x(-(this.configKonva.width * percent))
      this.$refs.pointLayer.getNode().x(-(this.configKonva.width * percent))
    },
    verticalTouchStart(e){
      this.verticalStart = {
        x: this.configKonva.width - this.differValue.y,
        y: this.$refs.verticalBar.getNode().y()
      }
    },
    verticalTouchMove(e){
      let touch = e.currentTarget.parent.parent.pointerPos
      let nowPos = {
        x: touch.x,
        y: touch.y
      }
      let dy = nowPos.y - this.verticalStart.y
      let yBarPos = this.$refs.verticalBar.getNode().y() + dy - 32
      yBarPos = Math.max(Math.min(yBarPos, this.configKonva.height - 100 - 5), 5)

      let barHeightRange = this.configKonva.height - 100 - 5 - 32
      let percent = yBarPos  / barHeightRange
      if (percent < 0){
        percent = 0
      }else if(percent > 1){
        percent = 1
      }
      this.$refs.verticalBar.getNode().position({x: this.configKonva.width - this.differValue.y, y: yBarPos})
      this.$refs.imgLayer.getNode().y(-(this.configKonva.height * percent))
      this.$refs.pointLayer.getNode().y(-(this.configKonva.height * percent))

    },

    changeComponentLanguage(){
      let lang = language.getTranslate(language.segNerveInteractBox)
      this.textInfoArray[0].text = lang.length
      this.textInfoArray[1].text = lang.angle
      this.tableTitle[0].text = lang.attribute
      this.tableTitle[1].text = lang.value

    },

    /**
     * 重载drag事件但是手机无法出发图像跟踪，需要后续调试
     */
    dragStartEvent(e){
      // 开始记录事件触发点
      this.nowStartPoint.x = e.evt.clientX
      this.nowStartPoint.y = e.evt.clientY
    },
    dragMoveEvent(e){
      // 这里计算相对位置
      let nowX = e.evt.clientX
      let nowY = e.evt.clientY

      let dx = nowX - this.nowStartPoint.x
      let dy = nowY - this.nowStartPoint.y

      let imgNode = this.$refs.imgLayer.getNode()
      imgNode.x(dx)
      imgNode.y(dy)

    },
    dragEndEvent(e){
      // 这里用于修正位置
      let nowX = e.evt.clientX
      let nowY = e.evt.clientY

      let imgNode = this.$refs.imgLayer.getNode()
      imgNode.position({nowX, nowY})
    },

    stageWheelEvent(e){
      /**
       *  由于drag事件会导致拖动后事件判定异常(就开始拖一下，然后全功能失效)
       *  因此尝试此方法，将图像拖动转换为滚轮等事件
       *  但手机端没有此事件，反而导致组建直接崩溃
       */
      // debugger
      // e.evt.preventDefault()

      let dx = e.evt.deltaX
      let dy = e.evt.deltaY

      let minX = -(this.configKonva.width - 32 - 100)
      let maxX = 0

      let imgLayerNode = this.$refs.imgLayer.getNode()
      let pointLayerNode = this.$refs.pointLayer.getNode()

      let x = Math.max(minX, Math.min(imgLayerNode.x() - dx, maxX))

      let minY = -(this.configKonva.width - 32 - 100)
      let maxY = 0

      let y = Math.max(minY, Math.min(imgLayerNode.y() - dy, maxY))
      imgLayerNode.position({x, y})
      pointLayerNode.position({x, y})

      // let barHeightRange = this.configKonva.height - 32 - 100
      // let barHeightY = (imgLayerNode.y() / (-100 + this.configKonva.height)) * barHeightRange + 15
      // this.$refs.verticalBar.getNode().y(barHeightY)
      //
      // let barHorizontalRange = this.configKonva.width - 32 - 100
      // let barWidthX = (imgLayerNode.x() / (-100 + this.configKonva.width)) * barHorizontalRange - 32
      // this.$refs.horizontalBar.getNode().x(barWidthX)
    },
    verticalBarDrag(){
      // debugger
      let barHeightRange = this.configKonva.height - 32 - 100
      let percent = (this.$refs.verticalBar.getNode().y() - 15) / barHeightRange
      if (percent < 0){
        percent = 0
      }else if(percent > 1){
        percent = 1
      }
      this.$refs.imgLayer.getNode().y(-(this.configKonva.height * percent))
      this.$refs.pointLayer.getNode().y(-(this.configKonva.height * percent))
    },
    horizontalBarDrag(){
      let barHorizontalRange = this.configKonva.width - 32 - 100
      let percent = (this.$refs.horizontalBar.getNode().x() - 5) / barHorizontalRange
      if (percent < 0){
        percent = 0
      }else if(percent > 1){
        percent = 1
      }
      this.$refs.imgLayer.getNode().x(-(this.configKonva.width * percent))
      this.$refs.pointLayer.getNode().x(-(this.configKonva.width * percent))
    },
    scaleReCal(){
      /**
       * 图像的缩放元素如下：
       *  1. 舞台
       *  2. 图像
       *  3. 神经点
       *  在窗体很大的时候，原图和神经点舞台都要扩大
       *  当窗体宽高不均衡的时候，舞台进行缩放即可, 并提供滑动条
       */
      // debugger
      this.stageScale.xScale = 1
      this.stageScale.yScale = 1
      this.configKonva.draggable = false
      // let wrapperHeight = this.$refs.viewWrapper.$el.offsetHeight
      // let wrapperWidth = this.$refs.viewWrapper.$el.offsetWidth
      let wrapperHeight = -1
      let wrapperWidth = -1
      if (this.judge(appConfig.calMode.mobileNoLeft)){
        wrapperHeight = window.innerHeight * 0.4
        wrapperWidth = window.innerWidth * 0.7
      }else{
        wrapperHeight = window.innerHeight * 0.7
        wrapperWidth = window.innerWidth * 0.7
      }

      let overHeight = (wrapperHeight > this.oriStage.height)
      let overWidth = (wrapperWidth > this.oriStage.width)

      // 判断点集合以及图像是否缩放
      if (overHeight && overWidth){
        let widthScale = wrapperWidth / this.oriStage.width * 0.8
        let heightScale = wrapperHeight / this.oriStage.height * 0.8
        let scaleSize = Math.min(widthScale, heightScale)

        // 调整画布大小
        this.configKonva.width = this.oriStage.width * scaleSize - 32
        this.configKonva.height = this.oriStage.height * scaleSize - 32

        // 让点的缩放适合画布
        this.stageScale.xScale = scaleSize
        this.stageScale.yScale = scaleSize
      }else{
        if (!overWidth){
          this.needScroll.x = true
          this.configKonva.draggable = true
          this.configKonva.width = wrapperWidth
        }else{
          this.configKonva.width = this.oriStage.width
        }

        if (!overHeight){
          this.needScroll.y = true
          this.configKonva.height = wrapperHeight
          this.configKonva.draggable = true
        }else{
          this.configKonva.height = this.oriStage.height
        }
      }

      this.scaleElement()
    },

    scaleElement(){
      /**
       * 根据计算结果，resize一些元素
       *  1. 原始图像
       *  2. 原始的点集
       */
      // debugger
      if (this.oriImgObj !== null){
        // 框架会给图片拉升一个32px的空间
        if (this.stageScale.xScale === 1 || this.stageScale.yScale === 1){
          this.oriImgObj.width = this.oriStage.width - 32
          this.oriImgObj.height = this.oriStage.height - 32
        }else{
          // this.oriImgObj.width = this.configKonva.width
          // this.oriImgObj.height = this.configKonva.height
          this.oriImgObj.width = (this.oriStage.width - 32) * this.stageScale.xScale
          this.oriImgObj.height = (this.oriStage.height - 32) * this.stageScale.yScale
        }

      }

      if (this.oriNervePoints.length > 0){
        if (this.stageScale.xScale === 1 || this.stageScale.yScale === 1){
          this.drawNerveArray = this.oriNervePoints
        }else{
          let convertArray = []
          for(let index = 0; index < this.oriNervePoints.length; index++){
            let eachObj = this.oriNervePoints[index]
            let eachArray = eachObj.points
            let tempArray = []
            for (let eleIndex = 0; eleIndex < eachArray.length - 1; eleIndex += 2){
              // 不知道为什么同是 左上坐标开始, 横为x, 纵为y，对不上
              tempArray.push(eachArray[eleIndex] * this.stageScale.xScale)
              tempArray.push(eachArray[eleIndex + 1] * this.stageScale.yScale)
            }
            let copy = JSON.parse(JSON.stringify(eachObj))  // 深拷贝
            copy.points = tempArray
            convertArray.push(copy)
          }
          this.drawNerveArray = convertArray
        }
      }

    },

    clickDraw(evt){
      let mousePos = this.$refs.interactStage.getNode().getPointerPosition()
      let differX = -this.$refs.interactStage.getNode().x()
      let differY = -this.$refs.interactStage.getNode().y()

      // this.debugInfo = "dx:" + differX.toFixed(4) + "dy:" + differY.toFixed(4) + "\nmx:" + mousePos.x.toFixed(4) + "my:" + mousePos.y.toFixed(4)
      this.iLineVertical.points = [differX + mousePos.x, differY, differX + mousePos.x, differY + this.configKonva.height]
      this.iLineHorizontal.points = [differX, differY + mousePos.y, differX + this.configKonva.width, differY + mousePos.y]

      console.log(evt)
    },

    clickEvent(evt){
      // debugger
      if (this.lastObjId !== "-1"){
        let obj = this.drawNerveArray[Number(this.lastObjId)]
        obj.stroke = "red"
      }

      let node = evt.target
      let id = node.id()

      this.lastObjId = id

      const item = this.drawNerveArray.find(i => i.id === id)
      item.stroke = "yellow"

      const value = this.oriNerveValue[Number(id)]
      this.textInfoArray[0].value = value.length.toFixed(3)
      this.textInfoArray[1].value = value.tangle.toFixed(3)

    },
    test_get_remote_value(){
      // 此函数编写完组建后删除
      let that = this
      let formData = {
        user_name: "tacom",
        token: "12345",
        img_name: "batch_1_1.tif"
      }
      uni.request({
        url: flaskApi.PREDICT_GET,
        method: "POST",
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: formData,
        success: (res) => {
          let jsonData = res.data
          that.parserInteractData(jsonData)
        },
        fail: (res) => {

        }
      })
    },
    parserInteractData(jsonData){
      let f3 = jsonData.vascular.f3
      let f3_1 = jsonData.vascular.f3_1

      const image = new window.Image()
      image.src = f3_1[0]
      image.onload = () => {
        this.oriImgObj = image
      }

      try{
        let f3_0 = JSON.parse(f3[0])

        for (let i = 0; i < f3_0.length; i++){
          let each_n = this.convertEachNerve(f3_0[i])
          this.normalList.push({
            id: f3_0[i].id.toString(),
            points: each_n,
            stroke: 'red',
            strokeWidth: 1,
            closed: true
          })
          this.valueList.push({
            length: f3_0[i].length,
            tangle: f3_0[i].tangle
          })
        }
      }catch (error){
        console.error(error)
      }
    },

    convertEachNerve(nerve){
      let l = nerve["borderList"]
      let dot_l = JSON.parse(l)
      let draw_l = []
      for (let i = 0; i < dot_l.length; i++){
        let each_dot = dot_l[i]
        draw_l.push(each_dot[0])
        draw_l.push(each_dot[1])
      }
      return draw_l
    }


  }
}
</script>

<style scoped>
  /deep/ .konvajs-content{
    margin: 0 auto;
  }
</style>
